import {Layout} from '../../src/Layout';
export default Layout;

import docs from 'docs:react-aria-components';
import {ColorArea as VanillaColorArea} from 'vanilla-starter/ColorArea';
import {ColorArea as TailwindColorArea} from 'tailwind-starter/ColorArea';
import '../../tailwind/tailwind.css';
import Anatomy from '@react-aria/color/docs/ColorAreaAnatomy.svg';

export const tags = [];
export const relatedPages = [{'title': 'useColorArea', 'url': 'ColorArea/useColorArea.html'}];
export const description = 'Allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.';

# ColorArea

<PageDescription>{docs.exports.ColorArea.description}</PageDescription>

<ExampleSwitcher>
  <VisualExample
    component={VanillaColorArea}
    docs={docs.exports.ColorArea}
    links={docs.links}
    props={['colorSpace', 'xChannel', 'yChannel', 'isDisabled']}
    initialProps={{defaultValue: 'hsl(0, 100%, 50%)'}}
    type="vanilla"
    files={["starters/docs/src/ColorArea.tsx", "starters/docs/src/ColorArea.css"]} />
  <VisualExample
    component={TailwindColorArea}
    docs={docs.exports.ColorArea}
    links={docs.links}
    props={['colorSpace', 'xChannel', 'yChannel', 'isDisabled']}
    initialProps={{defaultValue: 'hsl(0, 100%, 50%)'}}
    type="tailwind"
    files={["starters/tailwind/src/ColorArea.tsx", "starters/tailwind/src/ColorThumb.tsx"]} />
</ExampleSwitcher>

## Value

Use the `value` or `defaultValue` prop to set the color value, and the `xChannel` and `yChannel` props to specify which color channels to display. The value may be a string or <TypeLink type={docs.exports.Color} links={docs.links} /> object, parsed using the <TypeLink type={docs.exports.parseColor} links={docs.links} /> function.

The `onChange` event is called as the user drags, and `onChangeEnd` is called when the thumb is released. These are always called with a `Color` object.

```tsx render
"use client";
import {parseColor} from 'react-aria-components';
import {ColorArea} from 'vanilla-starter/ColorArea';
import {useState} from 'react';

function Example() {
  let [currentValue, setCurrentValue] = useState(parseColor('#9B80FF'));
  let [finalValue, setFinalValue] = useState(currentValue);

  return (
    <>
      <ColorArea
        xChannel="red"
        yChannel="green"
        /*- begin highlight -*/
        value={currentValue}
        onChange={setCurrentValue}
        onChangeEnd={setFinalValue} />
        {/*- end highlight -*/}
      <pre style={{fontSize: 12}}>
        onChange value: {currentValue.toString('hex')}{'\n'}
        onChangeEnd value: {finalValue.toString('hex')}
      </pre>
    </>
  );
}
```

## API

<Anatomy
  role="img"
  aria-label="Color area anatomy diagram: Shows a color area component with labels pointing to its parts, including the area, and thumb elements." />

```tsx links={{ColorArea: '#colorarea', ColorThumb: '#colorthumb'}}
<ColorArea>
  <ColorThumb />
</ColorArea>
```

### ColorArea

<PropTable component={docs.exports.ColorArea} links={docs.links} showDescription />

### ColorThumb

<PropTable component={docs.exports.ColorThumb} links={docs.links} showDescription />
